<!--
 * @Author: your name
 * @Date: 2020-05-24 21:22:37
 * @LastEditTime: 2020-05-25 04:59:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bootstrap-practice\03按钮\01.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="well">
        <p>
            <button class="btn btn-default">点击我</button>
            <button class="btn btn-primary">购买或提交</button>
            <button class="btn btn-danger">删除</button>
            <button class="btn btn-warning">警告</button>
            <button class="btn btn-info">信息</button>
            <!-- 将链接或提交变成按钮的样式 -->
            <a href="http://baidu.com" class="btn btn-danger">百度一下</a>
            <input class="btn btn-danger" type="submit" value="点击我">
        </p>
        <p>
            <button class="btn btn-primary btn-lg">大</button>
            <button class="btn btn-primary btn-sm">小</button>
            <button class="btn btn-primary btn-xs">超小</button>
            <button class="btn btn-primary btn-md">正常</button><!-- 默认没有这种类-->
        </p>
        <!-- btn-block类导致按钮占母元素的整块 -->
        <p>
            <button class="btn btn-primary btn-block">点击</button>
        </p>
        <p>
            <!-- 禁用状态 -->
            <button disabled class="btn btn-default">雷电村</button>
            <!-- 激活状态 -->
            <button class="btn btn-default active">木业村</button>
            <button class="btn btn-default">水村</button>
        </p>
        <!-- 按钮组 -->
        <p>
            <div class="tool-bar">
                <div class="btn-group">
                        <div class="btn btn-default">戳我</div>
                        <div class="btn btn-default">戳我</div>
                        <div class="btn btn-default">戳我</div>
                </div>
                <!-- 用btn-group包裹起来的按钮标签在页面中显示是一组 -->
                <div class="btn-group">
                    <div class="btn btn-default">戳我</div>
                    <div class="btn btn-default">戳我</div>
                    <div class="btn btn-default">戳我</div>
                </div>
            </div>
        </p>
        <!-- 通过预制类直接控制大小 -->
        <p>
            <div class="btn-group btn-group-lg">
                <div class="btn btn-default">戳我</div>
                <div class="btn btn-default">戳我</div>
                <div class="btn btn-default">戳我</div>
            </div>
            <div class="btn-group btn-group-sm">
                <div class="btn btn-default">戳我</div>
                <div class="btn btn-default">戳我</div>
                <div class="btn btn-default">戳我</div>
            </div>
            <div class="btn-group btn-group-xs">
                <div class="btn btn-default">戳我</div>
                <div class="btn btn-default">戳我</div>
                <div class="btn btn-default">戳我</div>
            </div>
        </p>
        <!-- 垂直组按钮 -->
        <p>
            <div class="btn-group-vertical">
                <div class="btn btn-default">戳我</div>
                <div class="btn btn-default">戳我</div>
                <div class="btn btn-default">戳我</div>
            </div>
        </p>
    </div>
</body>
</html>